require('../../assets/css/index.less');
require('./data.less');
// require('./iconfont/iconfont.css')
let  echarts=require('echarts')
// 基于准备好的dom，初始化echarts实例
window.onload = () => {
 function fa(){
    const myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
        title: {
          text: '近七天运动时长'
        },
        xAxis: {
          
            data: ['11-5', '11-6', '11-7', '11-8', '11-9', '11-10', '11-11']
          },
          yAxis: {},
          series: [
            {
                name:'运动',
              data: [ 20, 60, 40, 120, 85, 85,40],
              type: 'bar',
            //   showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
      });
 }
 fa()
 function fdd(){
    const myChart = echarts.init(document.getElementById('main2'));
    console.log(myChart);
   let option = {
        title: {
          text: '运动分类',
          left: '0px'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left:'0px',
          top:'60px'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
             left:'10px',
            data: [
              { value: 40, name: '训练', 
              label:{
                //    show:false,
                   position:'inside',
                   color:'#fff',
                   formatter:'{c}%',
              }, itemStyle:{
                color:'#58BB92'
               }
            },
            //   { value: 735, name: 'Direct' },
           
              { value: 25, name: '跑步' ,
              label:{
                // show:false
                position:'inside',
                color:'#fff',
                formatter:'{c}%'
           },itemStyle:{
            color:'#736171'
           }
        },
              { value: 35, name: '骑行' ,
              label:{
            //    show:false
               position:'inside',
               color:'#fff',
               formatter:'{c}%'
           },itemStyle:{
            color:'#EE5C43'
           }
            },
           
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      
      };
        //3 导入配置
        myChart.setOption(option) 
 }
  fdd()    
}
